<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>学生管理</title>
</head>
<body>
<div style="margin: 20px auto; max-width: 1140px">
  <div class="layui-row " style="position: relative;right: 93px">
    <div class="layui-col-md10 layui-col-md-offset1">
      <div class="demoTable">
        <div class="layui-inline">
          <input class="layui-input" name="teacherName" id="teacherName" placeholder="请输入姓名">
        </div>
        <div class="layui-inline">
          <select class="layui-inline" name="=teacherId" id="teacher1IdSelect" style="display: inline-block;height: 35px"></select>
          <select class="layui-inline" name="teacherStatus" id="teacherStatusSelect" style="display: inline-block;height: 35px">
            <option value="2" disabled selected>请选择状态</option>
            <option value="0">启用</option>
            <option value="1">停用</option>
          </select>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn" id="resetButton">重置</button>
      </div>
    </div>
  </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<div id="teacherItem" style="display: none;position: relative;margin: 50px">
  <form class="layui-form layui-form-pane" lay-filter="viewForm">
    <div class="layui-form-item">
      <label class="layui-form-label">教师姓名</label>
      <div class="layui-input-inline">
        <input type="text" name="teacherName" lay-verify="required" autocomplete="off" class="layui-input"
               disabled>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">课程Id</label>
      <div class="layui-input-inline">
        <input type="text" name="courseId" lay-verify="required" autocomplete="off" class="layui-input"
               disabled>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户Id</label>
      <div class="layui-input-inline">
        <input type="text" name="userId" lay-verify="required" autocomplete="off" class="layui-input"
               disabled>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">教师编号</label>
      <div class="layui-input-inline">
        <input type="text" name="userId" lay-verify="required" autocomplete="off" class="layui-input"
               disabled>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身份证号</label>
      <div class="layui-input-inline">
        <input type="text" name="teacherIdent" autocomplete="off" class="layui-input" disabled>
      </div>
    </div>
  </form>
</div>
<div id="editteacher" style="display: none;position: relative;margin: 50px">
  <form class="layui-form layui-form-pane" lay-filter="editForm" id="editForm" action="">
    <div class="layui-form-item" style="display: none">
      <label class="layui-form-label">教师Id</label>
      <div class="layui-input-inline">
        <input type="text" name="teacherId" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">课程Id</label>
      <div class="layui-input-inline">
        <input type="text" name="courseId" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户编号</label>
      <div class="layui-input-inline">
        <input type="text" name="userId" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">教师编号</label>
      <div class="layui-input-inline">
        <input type="text" name="teachertId" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">入职时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="teacherTime" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <!--        入学时间div-->
    <div class="layui-form-item">
      <label class="layui-form-label">出生日期</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="teacherBir" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身份证号</label>
      <div class="layui-input-inline">
        <input type="text" name="teacherIdent" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!--        <div class="layui-form-item" style="display: none">-->
    <!--            <label class="layui-form-label">状态</label>-->
    <!--            <div class="layui-input-inline">-->
    <!--                <input type="text" name="userStatus" lay-verify="required" autocomplete="off" class="layui-input">-->
    <!--            </div>-->
    <!--        </div>-->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
    <button class="layui-btn layui-btn-sm" lay-event="startUsing" style="background-color: #31BDEC">启用</button>
    <button class="layui-btn layui-btn-sm" lay-event="stopUsing" style="background-color: #FFB800">停用</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete" style="background-color: #FF5722">删除选中用户
    </button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="modifyStatus">修改状态</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

</script>

<script>
  layui.use(['table', 'dropdown', 'form', 'upload'], function () {
    var table = layui.table;
    var dropdown = layui.dropdown;
    let form = layui.form;
    var $ = layui.$, active = {
      reload: function () {
        var teacherName = $("#teacherName");
        var teacherStatus = $("#teacherStatusSelect");
        console.log(teacherName.val())
        console.log(teacherStatus.val())
        //执行重载
        layer.msg(0)
        table.reload('test', {
          url: '/teacher/selectAllTeacher',
          page: {
            curr: 1 //重新从第 1 页开始
          }
          , where: {
            name: teacherName.val() == "" ? null : teacherName.val(),
            status: teacherStatus.val() == 0 ? null : teacherStatus.val()
          }
        });
      }
    }
    $('.demoTable .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    // 创建渲染实例
    table.render({
      elem: '#test'
      , url: "/teacher/selectAllTeacher"
      , toolbar: '#toolbarDemo'
      , defaultToolbar: ['filter', 'exports', 'print', {
        title: '帮助'
        , layEvent: 'LAYTABLE_TIPS'
        , icon: 'layui-icon-tips'
      }]
      , height: 'full-200'
      , cellMinWidth: 80
      , totalRow: true
      , page: true
      , limit: 10
      , cols: [[
        {type: 'checkbox', fixed: 'left'}
        , {field: 'teacherId', width: 80, fixed: 'left', width: 70, title: 'ID', sort: true, totalRowText: '合计：'}
        , {field: 'teacherName', width: 100, title: '教师姓名'}
        , {field: 'courseId', width: 100, title: '科目Id', sort: true}
        , {field: 'teachersId', width: 160, title: '学生学号', sort: true}
        , {field: 'teacherSex', width: 100, title: '学生性别', sort: true}
        , {field: 'teacherAddress',title: '地址', minWidth: 260, style: '-moz-box-align: start;'}
        , {
          field: 'teacherStatus', width: 100, title: '状态', templet: function (data) {
            if (data.teacherStatus == 0)
              return '<span style="color: #00FF00">启用</span>';
            else
              return '<span style="color: #d43f3a">停用</span>';
          }
        }
        , {field: 'teacherTime', width: 120, title: '入职时间'}
        , {field: 'teacherBir', width: 200, title: '出生年月'}
        , {field: 'teacherIdent', width: 180, title: '身份证号',sort: true}
        , {field: 'teacherData', width: 200, title: '教师备注'}
        , {fixed: 'right', title: '操作', width: 270, minWidth: 270, toolbar: '#barDemo'}
      ]]
    });

    // 更多测试
    dropdown.render({
      elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
      , data: [{
        id: 'add',
        title: '添加'
      }, {

        id: 'update',
        title: '编辑'
      }, {
        id: 'delete',
        title: '删除'
      }]
      , click: function (obj) {
        var checkStatus = table.checkStatus(id)
        var data = checkStatus.data; // 获取选中的数据
        switch (obj.id) {
          case 'add':
            layer.open({
              title: '添加',
              type: 1,
              area: ['80%', '80%'],
              content: '<div style="padding: 16px;">自定义表单元素</div>'
            });
            break;
          case 'update':
            if (data.length !== 1) return layer.msg('请选择一行');
            layer.open({
              title: '编辑',
              type: 1,
              area: ['80%', '80%'],
              content: '<div style="padding: 16px;">自定义表单元素</div>'
            });
            break;
          case 'delete':
            if (data.length === 0) {
              return layer.msg('请选择一行');
            }
            layer.msg('delete event');
            break;
        }
      }
    });
    // 工具栏事件
    table.on('toolbar(test)', function (obj) {
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(layui.util.escape(JSON.stringify(data)));
          break;
        case 'insert':
          form.val('myForm', {
            'teacherId': 0,
            'courseId':0,
            'userId':0,
            'teachertId':'',
            'teacherStatus':0,
            'teacherTime':'',
            'teacherBir':'',
            'teacherIdent':'',
            'teacherIntro':'',
            'teacherType':'',
          });
          $("#editForm").attr("action", '/teacher/insertTeacher')
          editDiv = layer.open({
            title: '新增',
            type: 1,
            area: ['60%', '80%'],
            content: $("#editTeacher"),
            shade: 0
          });
          break;
        case 'startUsing':
          var data = checkStatus.data;
          var teacherIdList = new Array()
          for (var i in data) {
            teacherIdList.push(data[i].teacherId)
          }
          $.ajax({
            url: '/teacher/updateTeacherStatus',
            type: 'put',
            dataType: 'json',
            data: JSON.stringify({teacherIds: teacherIdList, teacherStatus: 0}),
            contentType: 'application/json',
            success: function (res) {
              if (res.code == 0) {
                table.reload("test")
              }
            }
          })
          break;
        case 'stopUsing':
          var data = checkStatus.data;
          var teacherIdList = new Array()
          for (var i in data) {
            teacherIdList.push(data[i].teacherId)
          }
          $.ajax({
            url: '/teacher/updateTeacherStatus',
            type: 'put',
            dataType: 'json',
            data: JSON.stringify({teacherIds: teacherIdList, teacherStatus: 1}),
            contentType: 'application/json',
            success: function (res) {
              if (res.code == 0) {
                table.reload("test")
              }
            }
          })
          break;
        case 'delete':
          layer.confirm('确定删除？', function (index) {
            var data = checkStatus.data;
            var teacherIdList = new Array()
            for (var i in data) {
              teacherIdList.push(data[i].teacherId)
            }
            console.log(JSON.stringify({teacherIds: teacherIdList}))
            $.ajax({
              url: '/teacher/deleteTeacher',
              type: 'delete',
              dataType: 'json',
              data: JSON.stringify({teacherIds: teacherIdList}),
              contentType: 'application/json',
              success: function (res) {
                if (res.code == 0) {
                  layer.msg("删除成功")
                  table.reload("test")
                } else {
                  lay.msg(res.msg)
                }
              }
            })
            layer.close(index)
          })
          break;
      }
    });
    //触发单元格工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除行么', function (index) {
          layer.msg(JSON.stringify({teacherIds:data.teacherId}));
          var dd={teacherIds:data.teacherId};
          var teacherIdList = new Array()

          $.ajax({
            url: '/teacher/deleteTeacher',
            data:JSON.stringify(dd),
            type: 'delete',
            dataType: 'json',
            data: JSON.stringify({teacherIds: teacherIdList}),
            contentType: 'application/json',
            success: function (res) {
              if (res.code == 0) {
                layer.msg("删除成功")
                table.reload("test")
                obj.del();
              } else {
                lay.msg(res.msg)
              }
            }
          })
          layer.close(index);

        });
      } else if (obj.event === 'edit') {
        console.log(data)
        form.val('editForm', {
          'teacherId': data.teacherId,
          'teacherName': data.teacherName,
          'teachersId': data.teachersId,
          'clazzId': data.clz.clazzId,
          'teacherSex': data.teacherSex,
          'teacherAddress': data.teacherAddress,
          'teacherStatus': data.teacherStatus,
          'teacherTime': data.teacherTime,
          'teacherRegaress': data.teacherRegaress,
          'teacherIdent': data.teacherIdent,
          'teacherData': data.teacherData
        })
        $("#editForm").attr("action", '/teacher/updateTeacher')
        editDiv = layer.open({
          title: '编辑',
          type: 1,
          area: ['60%', '80%'],
          content: $("#editTeacher"),
          shade: 0
        });
      } else if (obj.event === 'view') {
        form.val('viewForm', {
          'teacherId': data.teacherId,
          'courseId': data.courseId,
          'userId': data.userId,
          'teachertId': data.teachertId,
          'teacherStatus': data.teacherStatus,
          'teacherTime': data.teacherTime,
          'teacherBir': data.teacherBir,
          'teacherIdent': data.teacherIdent,
          'teacherType': data.teacherType
        })
        layer.open({
          title: '学生信息',
          type: 1,
          area: ['60%', '60%'],
          content: $("#teacherItem"),
          shade: 0
        });
      } else if (obj.event === "modifyStatus") {
        console.log(data)
        var teacherIds = [data.teacherId]
        let teacherStatus = 0;
        if (data.teacherStatus == 0) {
          teacherStatus = 1;
        }
        console.log(teacherIds)
        $.ajax({
          url: '/teacher/updateTeacherStatus',
          type: 'put',
          data: JSON.stringify({
            teacherIds: teacherIds,
            teacherStatus: teacherStatus
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: function (data) {
            if (data.code == 0) {
              table.reload('test')
              layer.close("editDiv");
            } else {
              layer.msg(data.msg)
            }
          }
        })
      }
    });
    form.on('submit(sub)', function (data) {
      let da = data.field;
      let url = $("#editForm").attr("action")
      $.ajax({
        url: url,
        type: 'put',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(da),
        success: function (data) {
          if (data.code == 0) {
            layer.msg("成功")
            table.reload("test");
            layer.close(editDiv)
          } else {
            layer.msg(data.msg)
          }
        }
      })
      return false;
    })
  })

</script>
</body>
</html>